<template>
  <div>
    <div class="head-btn">
      <mt-button class="add-btn">+ 新增</mt-button>
    </div>
    <div class="tab">
      <mt-navbar class="page-part" v-model="selected">
        <mt-tab-item id="1">全部</mt-tab-item>
        <mt-tab-item id="2">待接单</mt-tab-item>
        <mt-tab-item id="3">处理中</mt-tab-item>
        <mt-tab-item id="4">已结单</mt-tab-item>
      </mt-navbar>
      <!-- tab-container -->
      <mt-tab-container class="tab-container" v-model="selected">
        <mt-tab-container-item id="1">
            <div class="card-wrap" v-for="caseInfo in caseList" :key="caseInfo.id">
              <CaseCard  :caseInfo="caseInfo"></CaseCard>
            </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <div>2</div>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
          <div>3</div>
        </mt-tab-container-item>
        <mt-tab-container-item id="4">
          <div>4</div>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>

<script>
import * as sericeCaseServer from "@/api/service-case";
import CaseCard from "./components/CaseCard";
export default {
  name: "List",
  components: {
    CaseCard,
  },
  data() {
    return {
      caseList: [{id:1},{id:2},{id:3},],
      selected: "1",
    };
  },
  created() {
    // this.getList();
  },
  methods: {
    async getList() {
      const params = {
        statusCd: "",
        beginDate: "",
        endDate: "",
        serviceType: "",
        custId: "",
        staffId: 1,
        custSoNumber: "",
      };
      const res = await sericeCaseServer.serviceCases(params);
      console.log(res);
    },
  },
};
</script> 
 
<style lang="scss" scoped>
.head-btn {
  margin-top: 4px;
  padding: 0 5px;
  .add-btn {
    width: 100%;
    background: $c-orange;
    color: #fff;
    font-size: $f2;
  }
}
.tab-container {
  background: $c-bg-gray;
  padding: 5px 7px;
  .card-wrap{
    margin-top:7px ; 
    &:first-of-type{
      margin-top:none;
    } 
  }
}
</style>